<template>
  <div>
    <hd titles="我的拼团"></hd>
    <van-grid >
      <van-grid-item :class="{ on: currentIndex === 0 }" text="全部" @click="show('全部', 0)"/>

      <van-grid-item :class="{ on: currentIndex === 1 }" text="拼团中" @click="show('拼团中', 1)"/>

      <van-grid-item :class="{ on: currentIndex === 2 }" text="已成团" @click="show('已成团', 2)"/>

      <van-grid-item :class="{ on: currentIndex === 3 }" text="拼团失败" @click="show('拼团失败', 3)"/>
    </van-grid>
    
    <GroupItem
      v-for="(item, index) in groupItemData"
      :key="index"
      :itemData="item"/>

    <van-divider :style="{ color: '	#808080', borderColor: '#808080', padding: '0 16px'}" >
        亲，我也是有底线的
    </van-divider>

  </div>
</template>

<script>
import GroupItem from "../components/gjj/GroupItem";
import hd from '@/components/public/hd'

// 模拟数据
var groupItemData = [
  {
    img: "../../static/images/6.jpg",
    p: "【仅限深圳同城地区】新鲜水果上市 大荔冬枣  5斤/箱 枣香枣脆 等你抢购",
    tuan: "2人团",
    price: "78.00",
    status: "拼团中",
  },
  {
    img: "../../static/images/6.jpg",
    p: "【仅限深圳同城地区】新鲜水果上市 大荔冬枣  10斤/箱 枣香枣脆 等你抢购",
    tuan: "3人团",
    price: "98.00",
    status: "已成团",
  },
  {
    img: "../../static/images/6.jpg",
    p: "【仅限深圳同城地区】新鲜水果上市 大荔冬枣  10斤/箱 枣香枣脆 等你抢购",
    tuan: "3人团",
    price: "98.00",
    status: "拼团失败",
  },
];

function myFilter(type) {
  let tmp = [];
  for (let i = 0; i < groupItemData.length; i++) {
    if (groupItemData[i].status === type) {
      tmp.push(groupItemData[i]);
    }
  }
  return tmp;
}

export default {
  name: "MyGroup",
  data() {
    return {
      currentIndex: 0,
      groupItemData: [],
    };
  },
  components: {
    GroupItem,
    'hd':hd
  },
  created() {
    setTimeout(() => {
      this.groupItemData = groupItemData;
    }, 0);
  },
  methods: {
    show(type, index) {
      this.currentIndex = index;

      // console.log(type)
      if (type === "全部") {
        this.groupItemData = groupItemData;
        return;
      }

      this.groupItemData = groupItemData.filter(function (item) {
        return item.status === type;
      });

      console.log(this.groupItemData);

      // this.groupItemData = myFilter(type);
    },
  },
};
</script>

<style scope>
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
}

.van-grid van-hairline--top {
  margin-top: 15px;
}

.van-grid-item__content {
  background-color: ghostwhite;
}

/* .van-hairline {
  border: 1px solid rgb(70, 70, 70);
} */

.on .van-grid-item__text {
  color: #ff9c2a;
}


</style>